import './js/libs/weapp-adapter'
import './js/libs/symbol'
import MyApp from "./src/main/MyApp";

// import Main from './js/main'
// new Main()
// new MyApp();

// 使用 Layout  库
const Layout = requirePlugin('Layout').default;

const ctx = canvas.getContext('2d');

// let template = `
//   <view id="container">
//     <text id="testText" class="redText" value="我们的队伍像太阳!"></text>
//     <text id="btn_1" value="btn_1"></text>
//   </view>
// `;
// let style = {
//     container: {
//         width: "100%",
//         height: "100%",
//         backgroundColor: "#ffffff",
//         justifyContent: "center",
//         alignItems: "center",
//     },
//     testText: {
//         color: "#ffffff",
//         width: 100,
//         height: 50,
//         fontSize: 24,
//         textAlign: "center",
//     },
//     // 文字的最终颜色为#ff0000
//     redText: {
//         color: "#ff0000",
//     },
// };


// 实现一个滚动条
let template = `
<view id="container">
    <scrollview id="sv" scrollY="true">
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="0"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="1"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="2"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="3"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="4"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="5"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="6"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="7"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="8"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="9"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="10"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="11"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="12"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="13"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="14"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="15"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="16"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="17"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="18"></text>
            <text class="btn_share" value="分享"></text>
        </view>
        <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="19"></text>
            <text class="btn_share" value="分享"></text>
        </view>
    </scrollview>
</view>
`;

function createTemplate(){
    let begin = `<view id="container"><scrollview id="sv">`;
    let arr = [];
    arr.push(begin);
    for (let i = 0; i < 20;++i){
        let item = `
         <view class="sv_item">
            <image class="head" src="src/main/imgs/avatar.png"></image>
            <text class="score" value="${i}"></text>
            <text class="btn_share" value="分享"></text>
        </view>`;
        arr.push(item);
    }
    let end = `</scrollview></view>`;
    arr.push(end);
    return arr.join('');
}

// let template = createTemplate();
// console.log(template);

let  style = {
    container:{
        width:'100%',
        height:'100%',
        backgroundColor: "#ffffff",
    },
    sv:{
        marginTop:50,
        width:'100%',
        height:'80%',
        backgroundColor: "#aaaaaa",
    },
    sv_item:{
        flexDirection:'row',
        width:'100%',
        height:60,
        backgroundImage:'url(src/main/imgs/rankBg.png)',
        alignItems:'center',
        justifyContent:'space-between'
    },
    head:{
        width:40,
        height:40,
        marginLeft:10
    },
    btn_share:{
        width:100,
        height:30,
        backgroundImage: 'url(src/main/imgs/shareBg.png)',
        textAlign:'center',
        verticalAlign:'middle',
        fontSize:20,
        lineHeight:30,
    },
};


Layout.init(template, style);
Layout.updateViewPort({
    x: 0,
    y: 0,
    width: canvas.width,
    height: canvas.height,
});
Layout.layout(ctx);

//  隐藏滚动条
let sv = Layout.getElementById("sv");
if (sv){
    console.log(sv);
    if ("vertivalScrollbar" in sv){
        console.log("has vertivalScrollbar");
        console.log(sv.vertivalScrollbar);
    }
}

// let btn1 = Layout.getElementById("btn_1");
// btn1.on('click',()=>{
//    console.log("btn_1 clicked!");
// });